<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员搞笑之家 - 欢乐首页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Comic Sans MS', 'Segoe UI', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            position: relative;
        }
        
        .logo {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
            animation: bounce 2s infinite;
        }
        
        h1 {
            font-size: 3.5rem;
            margin-bottom: 10px;
            text-shadow: 3px 3px 0 #ff6b6b, 6px 6px 0 #4ecdc4;
        }
        
        .tagline {
            font-size: 1.5rem;
            margin-bottom: 30px;
            color: #ffd166;
        }
        
        .banner {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            margin: 30px 0;
            position: relative;
            overflow: hidden;
            border: 5px dashed #ffd166;
        }
        
        .banner h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #ffd166;
        }
        
        .banner p {
            font-size: 1.2rem;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin: 50px 0;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            width: 300px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            border: 3px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-10px) rotate(2deg);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            border-color: #ffd166;
        }
        
        .feature-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #ffd166;
        }
        
        .feature-card h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: #ffd166;
        }
        
        .feature-card p {
            margin-bottom: 20px;
            font-size: 1.1rem;
            line-height: 1.5;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: #ff6b6b;
            color: white;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            border: 3px solid #ff9e9e;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
            cursor: pointer;
        }
        
        .btn:hover {
            background: #ff9e9e;
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
        }
        
        .joke-section {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 20px;
            padding: 40px;
            margin: 50px 0;
            text-align: center;
        }
        
        .joke-section h2 {
            font-size: 2.5rem;
            margin-bottom: 30px;
            color: #ffd166;
        }
        
        .joke {
            font-size: 1.8rem;
            margin: 30px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .joke-btn {
            background: #4ecdc4;
            border-color: #88d8d0;
            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
            margin: 0 10px;
        }
        
        .joke-btn:hover {
            background: #88d8d0;
            box-shadow: 0 8px 20px rgba(78, 205, 196, 0.6);
        }
        
        footer {
            text-align: center;
            padding: 30px;
            margin-top: 50px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 20px;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }
        
        .social-icon {
            font-size: 2.5rem;
            color: #ffd166;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            color: #ff6b6b;
            transform: rotate(15deg) scale(1.2);
        }
        
        .secret-link {
            margin-top: 20px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .secret-link a {
            color: #ffd166;
            text-decoration: none;
        }
        
        .secret-link a:hover {
            text-decoration: underline;
        }
        
        .bug {
            position: absolute;
            font-size: 2rem;
            animation: fly 15s linear infinite;
            opacity: 0.7;
            z-index: -1;
        }
        
        @keyframes fly {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(200px, 150px) rotate(90deg); }
            50% { transform: translate(400px, 50px) rotate(180deg); }
            75% { transform: translate(600px, 200px) rotate(270deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        .rotate {
            animation: rotate 10s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .coffee-cup {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 3rem;
            animation: steam 4s infinite;
        }
        
        @keyframes steam {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
            50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
        }
        
        .cat {
            position: absolute;
            bottom: 20px;
            left: 20px;
            font-size: 3rem;
            animation: walk 8s infinite;
        }
        
        @keyframes walk {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(200px); }
        }
        
        @media (max-width: 768px) {
            h1 { font-size: 2.5rem; }
            .logo { font-size: 3rem; }
            .feature-card { width: 100%; max-width: 350px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 装饰元素 -->
        <div class="coffee-cup">☕</div>
        <div class="cat">🐱</div>
        <div class="bug">🐞</div>
        <div class="bug" style="top: 30%; left: 10%;">🐛</div>
        <div class="bug" style="top: 70%; left: 80%;">💻</div>
        <div class="bug" style="top: 20%; left: 90%;">🖥️</div>
        
        <header>
            <div class="logo floating">🤪💻🚀</div>
            <h1>程序员搞笑之家</h1>
            <p class="tagline">代码写得好，头发掉得少！</p>
        </header>
        
        <div class="banner">
            <h2>欢迎来到程序员的欢乐世界！</h2>
            <p>在这里，我们不讲技术，只讲段子！Bug是功能，报错是艺术，加班是我们的浪漫！</p>
        </div>
        
        <div class="features">
            <div class="feature-card">
                <div class="feature-icon">🐛</div>
                <h3>Bug 动物园</h3>
                <p>观赏我们收集的各种珍稀Bug，从可爱的小虫到毁灭级的恐龙Bug，应有尽有！</p>
                <a href="#bug-zoo" class="btn">参观动物园</a>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">😂</div>
                <h3>程序员段子</h3>
                <p>每日新鲜出炉的程序员专属笑话，专治各种代码抑郁！</p>
                <a href="#jokes" class="btn">看段子</a>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">🎮</div>
                <h3>404 游戏厅</h3>
                <p>体验我们精心设计的404错误游戏，看看你能找到多少隐藏页面！</p>
                <a href="#" onclick="play404Game()" class="btn">开始游戏</a>
            </div>
        </div>
        
        <div id="jokes" class="joke-section">
            <h2>今日程序员笑话</h2>
            <div class="joke" id="joke-text">
                为什么程序员总是分不清万圣节和圣诞节？<br>因为 Oct 31 == Dec 25！
            </div>
            <button class="btn joke-btn" onclick="newJoke()">再来一个</button>
            <button class="btn joke-btn" onclick="shareJoke()">分享笑话</button>
        </div>
        
        <div class="joke-section" id="bug-zoo">
            <h2>Bug 动物园</h2>
            <div class="joke">
                🐞 普通小虫 - 每天出现100次，无害<br>
                🐛 逻辑蠕虫 - 让你的代码跑偏<br>
                🦋 界面美化虫 - 让UI变得"独特"<br>
                🦖 恐龙级Bug - 导致系统崩溃，需要整个团队围剿<br>
                👻 幽灵Bug - 测试时消失，上线时出现！
            </div>
            <a href="#" class="btn" onclick="adoptBug()">领养一只Bug</a>
        </div>
        
        <footer>
            <p>加入我们的程序员欢乐社区！</p>
            <div class="social-links">
                <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-qq"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
            </div>
            <p class="secret-link">悄悄告诉你：<a href="#" onclick="showSecret()">老板不在家，点击摸鱼</a></p>
            <p>© 2023 程序员搞笑之家 | 本页面的所有Bug都是有意设计的！</p>
        </footer>
        <a href="a">错误</a>
    </div>

    <script>
        // 笑话库
        const jokes = [
            "为什么程序员讨厌大自然？因为里面有太多的Bug！",
            "程序员最讨厌的动物是什么？Bug和蚊子！",
            "为什么程序员总是把万圣节和圣诞节搞混？因为 Oct 31 == Dec 25！",
            "程序员相亲：你愿意和我一起debug人生吗？",
            "我有个代码写得超好的朋友，现在在监狱里。他突破了防火墙！",
            "为什么程序员喜欢黑暗模式？因为光吸引Bug！",
            "程序员最擅长的三件事：写代码、写注释、删掉代码重写！",
            "程序员的梦想：一次编译通过，永远不用调试！",
            "程序员最怕听到的四个字：需求变了！",
            "程序员最浪漫的情话：让我做你的专属API，永远稳定运行！",
            "为什么程序员总是带着伞？因为随时可能下Java！",
            "程序员和上帝的区别：上帝不会认为自己是在写代码！"
        ];
        
        // 显示新笑话
        function newJoke() {
            const jokeElement = document.getElementById('joke-text');
            const randomIndex = Math.floor(Math.random() * jokes.length);
            jokeElement.innerHTML = jokes[randomIndex];
            
            // 添加动画效果
            jokeElement.style.animation = 'none';
            setTimeout(() => {
                jokeElement.style.animation = 'float 1s ease';
            }, 10);
        }
        
        // 分享笑话
        function shareJoke() {
            const joke = document.getElementById('joke-text').innerText;
            alert(`分享这个笑话给朋友吧：\n\n"${joke}"\n\n来自程序员搞笑之家 🤪`);
        }
        
        // 404游戏
        function play404Game() {
            const pages = [
                "咖啡加浓中...",
                "寻找失踪的分号...",
                "重启大脑中...",
                "与Stack Overflow交流中...",
                "删除console.log中...",
                "尝试修复老板的Excel公式...",
                "祈祷编译通过...",
                "躲避产品经理中..."
            ];
            
            let count = 0;
            const game = setInterval(() => {
                alert(pages[count]);
                count++;
                
                if (count >= pages.length) {
                    clearInterval(game);
                    alert("恭喜你！找到了404游戏的终点！\n奖励：虚拟加班一小时！");
                }
            }, 1500);
        }
        
        // 领养Bug
        function adoptBug() {
            const bugs = ["🐞", "🐛", "🦋", "🦖", "👻"];
            const bugNames = ["小强", "蠕蠕", "花蝴蝶", "恐龙", "幽灵"];
            const randomBug = Math.floor(Math.random() * bugs.length);
            
            alert(`恭喜你领养了一只${bugNames[randomBug]}Bug！\n\n${bugs[randomBug]} ${bugs[randomBug]} ${bugs[randomBug]}\n\n请好好照顾它，每天喂它一些代码！`);
        }
        
        // 秘密摸鱼功能
        function showSecret() {
            document.body.style.background = "linear-gradient(135deg, #00b09b 0%, #96c93d 100%)";
            document.querySelector('h1').innerText = "摸鱼模式已启动！";
            document.querySelector('.tagline').innerText = "嘘...假装在工作，其实在摸鱼！";
            
            // 添加摸鱼元素
            const fish = document.createElement('div');
            fish.innerHTML = '🐟';
            fish.style.position = 'fixed';
            fish.style.fontSize = '3rem';
            fish.style.animation = 'float 3s infinite ease-in-out';
            fish.style.zIndex = '9999';
            document.body.appendChild(fish);
            
            // 让鱼游动
            let x = 0;
            let y = 50;
            let xSpeed = 2;
            let ySpeed = 1;
            
            setInterval(() => {
                x += xSpeed;
                y += ySpeed;
                
                if (x > window.innerWidth - 50 || x < 0) {
                    xSpeed = -xSpeed;
                    fish.style.transform = `scaleX(${xSpeed > 0 ? 1 : -1})`;
                }
                
                if (y > window.innerHeight - 50 || y < 0) {
                    ySpeed = -ySpeed;
                }
                
                fish.style.left = `${x}px`;
                fish.style.top = `${y}px`;
            }, 30);
            
            // 添加摸鱼提示
            const message = document.createElement('div');
            message.innerHTML = '摸鱼中...<br>老板靠近时请按Alt+F4';
            message.style.position = 'fixed';
            message.style.bottom = '20px';
            message.style.right = '20px';
            message.style.background = 'rgba(0,0,0,0.7)';
            message.style.color = 'white';
            message.style.padding = '10px';
            message.style.borderRadius = '10px';
            message.style.zIndex = '10000';
            document.body.appendChild(message);
        }
        
        // 初始加载时添加一些动画效果
        window.onload = function() {
            document.querySelector('.logo').classList.add('rotate');
            
            // 添加一些漂浮的元素
            for (let i = 0; i < 5; i++) {
                const icon = document.createElement('div');
                const icons = ['💻', '⌨️', '🖱️', '📱', '🔌', '💾', '📀'];
                icon.innerHTML = icons[Math.floor(Math.random() * icons.length)];
                icon.style.position = 'absolute';
                icon.style.left = `${Math.random() * 100}%`;
                icon.style.top = `${Math.random() * 100}%`;
                icon.style.fontSize = `${Math.random() * 2 + 1}rem`;
                icon.style.opacity = Math.random() * 0.5 + 0.3;
                icon.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
                document.body.appendChild(icon);
            }
        };
    </script>
</body>
</html>